<template>
    <div class="queryMedicine">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
                <el-row :gutter="20">
                    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                        <el-input v-model="form.name" placeholder="药品搜索"></el-input>
                    </el-col>
                    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                        <el-button type="primary" @click="fuzzyQueryMedicine">搜索</el-button>
                    </el-col>
                    <!-- <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                        <el-button type="primary">新增药品</el-button>
                    </el-col> -->

                </el-row>
            </el-form-item>
        </el-form>

        <el-table :data="medicines" border style="width: 100%">
            <el-table-column fixed prop="id" label="编号" width="150">
            </el-table-column>
            <el-table-column prop="productPzwh" label="批准文号" width="120">
            </el-table-column>
            <el-table-column prop="productFormat" label="规格" width="120">
            </el-table-column>
            <el-table-column prop="productName" label="名称" width="120">
            </el-table-column>
            <el-table-column prop="productManufacturer" label="生产企业" width="300">
            </el-table-column>
            <el-table-column prop="productBarcode" label="条形码" width="120">
            </el-table-column>
            <el-table-column prop="productForm" label="剂型" width="120">
            </el-table-column>
            <el-table-column prop="productWholesalePrice" label="批发价格" width="120">
            </el-table-column>
            <el-table-column prop="productRetailPrice" label="零售价格" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                    <!-- <el-button type="text" size="small">修改</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="productData.total" :page-size="productData.size"
            :current-page="productData.current" @current-change="handleChange">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: 'QueryMedicine',
        data() {
            return {
                form: {
                    name: '',
                },
                productData: {
                    total: 10,
                    size: 3,
                    current: 1
                },
                medicines: [{
                    id: '',
                    productPzwh: '',
                    productFormat: '',
                    productName: '',
                    productManufacturer: '',
                    productBarcode: '',
                    productForm: '',
                    productWholesalePrice: '',
                    productRetailPrice: ''
                }]
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            handleClick(index, row) {
                console.log(row);
                this.medicines.splice(index, 1);
            },
            handleChange(data) {
                this.productData.current = data;
                this.fuzzyQueryMedicine();
            },
            // 模糊查询药品
            fuzzyQueryMedicine() {
                this.$http.get("http://localhost:8088/fuzzyQueryMedicine", {
                        params: {
                            productName: this.form.name,
                            current: this.productData.current
                        }
                    })
                    .then(res => {
                        Object.assign(this.productData, res.data);
                        this.productData.total = res.data.data.total;
                        this.medicines = res.data.data.records
                    })
                    .catch(err => {
                        console.error(err);
                    })
            }
        },
        mounted() {
            this.fuzzyQueryMedicine();
        }
    }
</script>